import { useEffect, useState } from "react"
import source from "../../assist"
import "./style.css"
export default function DemoOne() {
  const [icons, setIcons] = useState<Array<string[]>>([])
  const [imgs, setImgs] = useState<Array<string[]>>([])

  useEffect(() => {
    const iconFonts = source.svgs
    const images = source.imgs
    const avatars = [...source.imgs.slice(0, 4), source.imgs[10], source.imgs[17]]
    setIcons([iconFonts.slice(0, 15), iconFonts.slice(15, 30), iconFonts.slice(30)].map((icons: string[], index: number) => [avatars[index], ...icons]))
    setImgs([images.slice(4, 10), images.slice(11, 17), images.slice(18, 24)].map((imgs: string[], index: number) => [avatars[index + 3], ...imgs]))
  }, [])

  return (
    <>
      <div className="flex justify-center overflow-y-hidden w-screen h-100% -mt-6 bg-no-repeat bg-iconfont">
        <div className="grid grid-cols-2 gap-10 lg:grid-cols-3 2xl:grid-cols-4 mb-20 mt-20">
          {icons.map((icon: string[], index: number) => (
            <div key={"upper" + index} className="block">
              <div className="flex justify-center mb-8 border-0 rounded-full">
                <div key={icon[0]} className="w-16" dangerouslySetInnerHTML={{ __html: icon[0] }}></div>
              </div>
              <div className="grid grid-cols-5 gap-8">
                {icon.slice(1).map((svg: string, index: number) => <div className="text-xl" key={svg + index} dangerouslySetInnerHTML={{ __html: svg }}></div>)}
              </div>
            </div>))}
          {imgs.map((img: string[], index: number) => (
            <div key={"bottom" + index} className="block" onClick={() => { }}>
              <div className="flex justify-center mb-8">
                <div key={img[0]} className="w-16" dangerouslySetInnerHTML={{ __html: img[0] }}></div>
              </div>
              <div className="grid grid-cols-3 gap-8">
                {img.slice(1).map((image: string, index: number) => <div className="w-10" key={image + index} dangerouslySetInnerHTML={{ __html: image }}></div>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  )
}